<template>
  <view class="app">
    <!-- 主题内容区域  -->
    <view class="contentArea">
      <!-- 负责人 -->
      <view class="principal">
        <view class="item" style="margin-right: 35rpx">
          <u-icon size="20" :top="2" name="account-fill"></u-icon>
          <span style="margin-left: 15rpx">负责人：</span>
          <span v-if="measuresDetailsData.directPersonName.length > 1"
            >{{ measuresDetailsData.directPersonName[0] }}...</span
          >
          <span v-else>{{ measuresDetailsData.directPersonName[0] }}</span>
        </view>
        <view class="item">
          <u-icon size="20" :top="2" name="phone-fill"></u-icon>
          <span style="margin-left: 15rpx">电话：</span>
          <span v-if="measuresDetailsData.telPhone.length > 1"
            >{{ measuresDetailsData.telPhone[0] }}...</span
          >
          <span v-else>{{ measuresDetailsData.telPhone[0] }}</span>
        </view>
      </view>
      <!-- /负责人 -->

      <!-- table表格 -->
      <view class="table">
        <!-- Table表头 -->
        <view class="tableHead">
          <view class="tableHeadName">措施名称</view>
          <view class="tableHeadName">内容</view>
          <view class="tableHeadName">详情</view>
        </view>
        <!-- /Table表头 -->
        <scroll-view
          scroll-y
          style="height: 83vh"
          @scrolltolower="leaveTheUpdateData"
        >
          <!-- Table内容 -->
          <view
            class="tableContent"
            v-for="item in measuresDetailsData.list"
            :key="item.id"
          >
            <view class="tableContentValue">
              {{ item.controlTypeName || "" }}
            </view>
            <view class="tableContentValue operationCharacterStyle">
              {{ item.controlMeasures || "" }}
            </view>
            <view
              class="tableContentValue operationCharacterStyle"
              @click="measuresDetails(item)"
              >详情</view
            >
          </view>
          <!-- /Table内容 -->
        </scroll-view>
      </view>
      <!-- /table表格 -->
    </view>
    <!-- /主题内容区域  -->
  </view>
</template>

<script>
/**
 * 引入API请求接口
 * getControlMeasuresList: 获取管控措施列表
 */
import { getControlMeasuresList } from "@/apis/risk/index.js";

export default {
  /**
   * 定义数据
   */
  data() {
    return {
      /* 措施详情数据 */
      measuresDetailsData: null,
      /* 请求携带的参数 */
      params: {
        // 当前页
        pageNo: 1,
        // 条数
        pageSize: 10,
        // 危险源ID
        hazardSourceId: undefined,
      },
    };
  },

  /**
   * 方法定义
   */
  methods: {
    //#region API 封装接口
    /* 获取管控措施列表 */
    async getControlMeasuresList() {
      const res = await getControlMeasuresList(this.params);

      if (this.measuresDetailsData) {
        this.measuresDetailsData.list = [
          ...this.measuresDetailsData.list,
          ...res.list,
        ];
      } else {
        this.measuresDetailsData = res;

        // 负责人名称
        this.measuresDetailsData.directPersonName =
          this.measuresDetailsData.directPersonName.split(",");
        // 负责人手机号
        this.measuresDetailsData.telPhone =
          this.measuresDetailsData.telPhone.split(",");
      }

      // 处理 undefined 或 null 情况
      this.measuresDetailsData.list = this.measuresDetailsData.list.map(
        (item) => {
          if (
            item.controlMeasures == "undefined" ||
            item.controlMeasures == "null"
          ) {
            item.controlMeasures = "";
          }
          return item;
        }
      );
    },
    //#endregion,

    /* 数据触底更新 */
    leaveTheUpdateData() {
      // 改变页数
      this.params.pageNo++;
      // 携带新的参数重新请求
      this.getControlMeasuresList();
    },

    /* 详情点击事件 */
    measuresDetails(rowData) {
      uni.navigateTo({
        url: `/riskPointManagement/detailPage/measuresDetails/inspectionRecord/index?controlId=${rowData.id}`,
      });
    },
  },

  /**
   * 接受路由传参
   */
  onLoad(options) {
    this.params.hazardSourceId = options.hazardSourceId;
  },

  /**
   * Vue 创建钩子
   */
  created() {
    setTimeout(() => {
      /* 请求数据 */
      this.getControlMeasuresList();
    }, 0);
  },
};
</script>

<style lang="scss" scoped>
/* 主题内容区域 */
.contentArea {
  width: 714rpx;
  // height: 98vh;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 0 8rpx;
  box-sizing: border-box;

  /* 负责人样式 */
  .principal {
    margin-bottom: 20rpx;
    display: flex;
    height: 85rpx;
    border-bottom: 1px solid #e4e4e4;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 24rpx;
      font-weight: 400;
      color: #848383;
    }
  }

  /* table表样式 */
  .table {
    /* 表头样式 */
    .tableHead {
      display: flex;
      align-items: center;
      justify-content: center;

      /* 表头item */
      .tableHeadName {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 78rpx;
        // padding: 0 13rpx;
        flex: 5;
        font-size: 24rpx;
        font-weight: 600;
        color: #ffffff;
        background-color: #81aef4;
      }
    }

    /* table内容区域样式 */
    .tableContent {
      display: flex;
      border-bottom: 1px solid #dad9d9;
      /* 内容值 */
      .tableContentValue {
        background-color: #fff;
        font-size: 22rpx;
        font-weight: 400;
        min-height: 78rpx;
        color: #666;

        display: flex;
        justify-content: center;
        align-items: center;
        flex: 5;
      }
      /* 操作按钮样式 */
      .operationCharacterStyle {
        font-size: 24rpx;
        font-weight: 400;
        color: #157ffb;
      }
    }
  }
}
</style>